<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
    <div class=" mt-4 pt-4  col" style="font-size: 24px">
        Dropdown
    </div>
    <div class="d-flex">
        <div class="col-6 p-0">
            <div class=" mt-4 pt-4  mb-3 col" style="font-size: 16px">
                Compact  Dropdown
            </div>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex flex-column mb-4" style="width: 100%">
                        <div class="wind100 d-flex mt-3 p-0 align-items-center">
                            <div class="col-6">
                                <label>Label Text</label>
                                <div class="unis-select unis-dropdown " error >
                                    <div class="message">Error Message If Requirement</div>
                                </div>
                            </div>
                            <div class="col-2 ml-4">Error Message If Requirement</div>
                        </div>
                        <div class="wind100  d-flex mt-4 p-0 align-items-center">
                            <div class="col-6">
                                <label>Label Text</label>
                                <div class="unis-select unis-dropdown disabled"  value="">
                                    Selected
                                    <ul>
                                        <li>Option 1</li>
                                        <li>Option 2</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-2 ml-4">Disabled</div>
                        </div>

                        <div class="wid100 d-flex mt-3 p-0 align-items-center" style="margin-bottom: 120px">
                            <div class="col-6">
                                <label>Label Text</label>
                                <div class="unis-select unis-dropdown active">
                                    Selected
                                    <ul>
                                        <li>Option 1</li>
                                        <li>Option 2</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-2 ml-4">Dropdown pressed</div>
                        </div>
                    </div>

                </template>
                <template v-slot:htmcode>
                    <div class="unis-select unis-dropdown" error>
                        <div class="message">Error Message If Requirement</div>
                    </div>
                    <div class="unis-select unis-dropdown disabled" >
                        Selected
                    </div>
                    <div class="unis-select unis-dropdown active">
                        Active

                        <ul>
                            <li>Option 1</li>
                            <li>Option 2</li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
        </div>
        <div class="col-6 p-0">
            <div class=" mt-4 pt-4  col" style="font-size: 16px">
                Dropdown
            </div>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex flex-column mb-4" style="width: 100%">
                        <div class="wid100 d-flex mt-3 p-0 align-items-center">
                            <div class="col-6">
                                <label>Label Text</label>
                                <div class="unis-select unis-dropdown large-border" error>
                                    Selected
                                    <div class="message">Error Message If Requirement</div>
                                </div>
                            </div>
                            <div class="col-2 ml-4">Error Message If Requirement</div>
                        </div>
                        <div class="wid100 d-flex mt-4 p-0 align-items-center">
                            <div class="col-6">
                                <label>Label Text</label>
                                <div class="unis-select unis-dropdown large-border disabled" >
                                    Selected
                                    <ul>
                                        <li>Option 1</li>
                                        <li>Option 2</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-2 ml-4">Disabled</div>
                        </div>

                        <div class="wid100 d-flex mt-4 p-0 align-items-center" style="margin-bottom: 120px">
                            <div class="col-6">
                                <label>Label Text</label>
                                <div class="unis-select unis-dropdown large-border active">
                                    Active
                                    <ul>
                                        <li>Option 1</li>
                                        <li>Option 2</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-2 ml-4">Dropdown pressed</div>
                        </div>
                    </div>

                </template>
                <template v-slot:htmcode>
                    <div class="unis-select unis-dropdown large-border" error>
                        Selected
                        <div class="message">Error Message If Requirement</div>
                    </div>
                    <div class="unis-select unis-dropdown large-border disabled" >
                        Selected
                    </div>
                    <div class="unis-select unis-dropdown large-border active">
                        Active
                        <ul>
                            <li>Option 1</li>
                            <li>Option 2</li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
        </div>
    </div>



    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <div class=" mt-2 mb-3" style="font-size: 16px">
                            &nbsp;&nbsp;
                        </div>
                        <div style="margin-bottom: 180px">
                            <div class="unis-select unis-dropdown unis-li40  ">
                                Label Text
                                <ul >
                                    <li class="m-0">
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="name1">
                                        <label for="name1" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li class="m-0">
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="name2">
                                        <label for="name2" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li class="m-0">
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="name3">
                                        <label for="name3" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li class="m-0">
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="name4">
                                        <label for="name4" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li class="m-0">
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="name5">
                                        <label for="name5" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li class="m-0">
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="name6">
                                        <label for="name6" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li class="m-0">
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="name7">
                                        <label for="name7" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        Dropdown with multiselect/no label
                    </div>
                    <div class="col-3">
                        <div class=" mt-2 mb-3" style="font-size: 16px">
                            Disabled
                        </div>
                        <div style="margin-bottom: 180px">
                            <div class="unis-select unis-dropdown unis-li40 disabled" >
                                    <span>Option 11,
                                    </span>
                                <span> Option 11,

                                    </span> <span> Option 11,

                                    </span>
                                <ul >
                                    <li class="m-0">
                                        <button class="unis-btn  compact unis-btn-primary mr-4">Primary</button> item
                                    </li>
                                    <li class="m-0 d-flex">
                                        <div class="col-9 p-0"><input type="text" value="Inactive" class="unis-input br-1 br-color "></div>  item
                                    </li>
                                    <li>
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname3">
                                        <label for="checkboxname3" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li>
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname4">
                                        <label for="checkboxname4" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li>
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname5">
                                        <label for="checkboxname5" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li>
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname6">
                                        <label for="checkboxname6" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li>
                                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname7">
                                        <label for="checkboxname7" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        Multiselect dropdown options selected/Disabled
                    </div>
                    <div class="col-3">
                        <div class=" mt-2 mb-3" style="font-size: 16px">
                            Large
                        </div>
                        <div style="margin-bottom: 180px">

                            <div class="unis-select unis-dropdown unis-li40 large-border active">
                                    <span>Option 11,
                                    </span>
                                <span> Option 11,

                                    </span> <span> Option 11,

                                    </span>
                                <ul>
                                    <li class="m-0">
                                        <button class="unis-btn  compact unis-btn-primary mr-4">Primary</button> item
                                    </li>
                                    <li class="m-0 d-flex">
                                        <div class="col-9 p-0  mr-4"><input type="text" value="Inactive" class="unis-input br-1 br-color "></div>  item
                                    </li>
                                    <li class="m-0">
                                        <input type="checkbox" name="layout" id="Entername13" class="unis-checkbox">
                                        <label for="Entername13" class="m-0 pl-3_5">item</label>
                                    </li>
                                    <li class="m-0">
                                        <input type="checkbox" name="layout" id="Entername14" class="unis-checkbox">
                                        <label for="Entername14" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        Multiselect dropdown closed/no label
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-select unis-dropdown unis-li40 ">
                                    <span>Option 11,
                                    </span>
                <span> Option 11,

                                    </span> <span> Option 11,

                                    </span>
                <ul >
                    <li >
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname1">
                        <label for="checkboxname1" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname2">
                        <label for="checkboxname2" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname3">
                        <label for="checkboxname3" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname4">
                        <label for="checkboxname4" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname5">
                        <label for="checkboxname5" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname6">
                        <label for="checkboxname6" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname7">
                        <label for="checkboxname7" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>
            <div class="unis-select unis-dropdown unis-li40 disabled" >
                                    <span>Option 11,
                                    </span>
                <span> Option 11,

                                    </span> <span> Option 11,

                                    </span>
                <ul >
                    <li >
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname1">
                        <label for="checkboxname1" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname2">
                        <label for="checkboxname2" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname3">
                        <label for="checkboxname3" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname4">
                        <label for="checkboxname4" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname5">
                        <label for="checkboxname5" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname6">
                        <label for="checkboxname6" class="m-0 pl-3_5">item</label>
                    </li>
                    <li>
                        <input class="unis-checkbox" type="checkbox" name="layout" id="checkboxname7">
                        <label for="checkboxname7" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>
            <div class="unis-select unis-dropdown unis-li40 large-border active">
                                    <span>Option 11,
                                    </span>
                <span> Option 11,

                                    </span> <span> Option 11,

                                    </span>
                <ul class="">
                    <li class="m-0">
                        <button class="unis-btn  compact unis-btn-primary mr-4">Primary</button> item
                    </li>
                    <li class="m-0 d-flex">
                        <div class="col-9 p-0 mr-4"><input type="text" value="Inactive" class="unis-input br-1 br-color "></div>  item
                    </li>
                    <li >
                        <input class="unis-checkbox" type="checkbox" name="layout" id="dropdown4">
                        <label for="dropdown4" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>
        </template>
    </dfault-vuew>

    <div class=" mt-4  col" style="font-size: 24px">
        Multiselect - search
    </div>
    <div class="d-flex">
        <div class="col-9 p-0">
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-4 ">
                            <div class=" mt-4 mb-3" style="font-size: 16px">
                                Compact
                            </div>
                            <div style="margin-bottom: 210px">
                                <div class="unis-multiselect active">
                                    <span>  <i class="icon-7 f-24"></i></span>
                                    <input type="text" placeholder="Enter A Keyword...">
                                    <ul>
                                        <li class="m-0">
                                            <button class="unis-btn  compact unis-btn-primary mr-4">Primary</button> item
                                        </li>
                                        <li class="m-0 d-flex">
                                            <div class="col-9 p-0"><input type="text" value="Inactive" class="unis-input br-1 br-color "></div>  item
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="ntername13" class="unis-checkbox">
                                            <label for="ntername13" class="m-0 pl-3_5">item</label>
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="ntername14" class="unis-checkbox">
                                            <label for="ntername14" class="m-0 pl-3_5">item</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <div class="col-4 ">
                            <div class=" mt-4 mb-3" style="font-size: 16px">
                                Disabled
                            </div>
                            <div style="margin-bottom: 210px">
                                <div class="unis-multiselect disabled" >
                                    <span>  <i class="icon-7 f-24"></i></span>
                                    <input type="text" placeholder="Enter A Keyword..." >
                                    <ul>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="ntername11" class="unis-checkbox">
                                            <label for="ntername11" class="m-0 pl-3_5">item</label>
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="ntername12" class="unis-checkbox">
                                            <label for="ntername12" class="m-0 pl-3_5">item</label>
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="ntername13" class="unis-checkbox">
                                            <label for="ntername13" class="m-0 pl-3_5">item</label>
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="ntername14" class="unis-checkbox">
                                            <label for="ntername14" class="m-0 pl-3_5">item</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <div class="col-4 ">
                            <div class=" mt-4 mb-3" style="font-size: 16px">
                                Large
                            </div>
                            <div style="margin-bottom: 210px">
                                <div class="unis-multiselect">
                                    <span>  <i class="icon-7 f-24"></i></span>
                                    <input type="text" placeholder="Enter A Keyword..." class="large-border">
                                    <ul>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="Entername11" class="unis-checkbox">
                                            <label for="Entername11" class="m-0 pl-3_5">item</label>
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="Entername12" class="unis-checkbox">
                                            <label for="Entername12" class="m-0 pl-3_5">item</label>
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="Entername13" class="unis-checkbox">
                                            <label for="Entername13" class="m-0 pl-3_5">item</label>
                                        </li>
                                        <li class="m-0">
                                            <input type="checkbox" name="layout" id="Entername14" class="unis-checkbox">
                                            <label for="Entername14" class="m-0 pl-3_5">item</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>

                </template>
                <template v-slot:htmcode>
                    <div class="unis-multiselect active">
                        <span>  <i class="icon-7 f-24"></i></span>
                        <input type="text" placeholder="Enter A Keyword...">
                        <ul>
                            <li class="m-0">
                                <button class="unis-btn  compact unis-btn-primary mr-4">Primary</button> item
                            </li>
                            <li class="m-0 d-flex">
                                <div class="col-9 p-0"><input type="text" value="Inactive" class="unis-input br-1 br-color "></div>  item
                            </li>
                            <li class="m-0">
                                <input type="checkbox" name="layout" id="ntername13" class="unis-checkbox">
                                <label for="ntername13" class="m-0 pl-3_5">item</label>
                            </li>
                            <li class="m-0">
                                <input type="checkbox" name="layout" id="ntername14" class="unis-checkbox">
                                <label for="ntername14" class="m-0 pl-3_5">item</label>
                            </li>
                        </ul>
                    </div>
                    <div class="unis-multiselect disabled" >
                        <span>  <i class="icon-7 f-24"></i></span>
                        <input type="text" placeholder="Enter A Keyword..." >

                    </div>
                    <div class="unis-multiselect ">
                        <span>  <i class="icon-7 f-24"></i></span>
                        <input type="text" placeholder="Enter A Keyword..." class="large-border">
                    </div>
                </template>
            </dfault-vuew>
        </div>
    </div>


    <div class=" mt-4  col" style="font-size: 24px">
        Date picker
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-2">
                    <div style="margin-bottom: 40px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value="MM/DD/YY">
                            <img src="img/svgs/data.svg" alt="">
                        </button>
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label>Date</label>
            <button class="unis-multiselect">
                <input type="button" value="MM/DD/YY">
                <img src="img/svgs/data.svg" alt="">
            </button>
        </template>
    </dfault-vuew>


    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-12 d-flex">
                    <div class="col-3"> <div style="margin-bottom: 210px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value="MM/DD/YY">
                            <img src="img/svgs/data.svg" alt="">
                            <div class="unis-date-filter">
                                <div class="date-box">
                                    <div class="date-view">
                                        <div class="operating-box pl-3 pr-3 mb-2">
                                            <i class="icon-15 cursor-p"></i>
                                            July 2018
                                            <i class="icon-8 cursor-p"></i>
                                        </div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates weeks">M</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">W</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">F</div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates ">
                                            <span>1</span>
                                        </div>
                                        <div class="dates ">
                                            <span>2</span>
                                        </div>
                                        <div class="dates ">
                                            <span>3</span>
                                        </div>
                                        <div class="dates ">
                                            <span>4</span>
                                        </div>
                                        <div class="dates ">
                                            <span>5</span>
                                        </div>
                                        <div class="dates ">
                                            <span>6</span>
                                        </div>
                                        <div class="dates day">
                                            <span>7</span>
                                        </div>
                                        <div class="dates day">
                                            <span>8</span>
                                        </div>
                                        <div class="dates day">
                                            <span>9</span>
                                        </div>
                                        <div class="dates day">
                                            <span>10</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>11</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>12</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>13</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>14</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>15</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>16</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>17</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>18</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>19</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>20</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>21</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>22</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>23</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>24</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>25</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>26</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>27</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>28</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>29</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>30</span>
                                        </div>
                                        <div class="dates day">
                                            <span>1</span>
                                        </div>
                                        <div class="dates day">
                                            <span>2</span>
                                        </div>
                                        <div class="dates day">
                                            <span>3</span>
                                        </div>
                                        <div class="dates day">
                                            <span>4</span>
                                        </div>
                                        <div class="dates day">
                                            <span>5</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div></div>
                    <div class="col-3"> <div style="margin-bottom: 210px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value="MM/DD/YY">
                            <img src="img/svgs/data.svg" alt="">
                            <div class="unis-date-filter">
                                <div class="date-box">
                                    <div class="date-view">
                                        <div class="operating-box pl-3 pr-3 mb-2">
                                            <i class="icon-15 cursor-p"></i>
                                            July 2018
                                            <i class="icon-8 cursor-p"></i>
                                        </div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates weeks">M</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">W</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">F</div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates ">
                                            <span>1</span>
                                        </div>
                                        <div class="dates ">
                                            <span>2</span>
                                        </div>
                                        <div class="dates ">
                                            <span>3</span>
                                        </div>
                                        <div class="dates ">
                                            <span>4</span>
                                        </div>
                                        <div class="dates ">
                                            <span>5</span>
                                        </div>
                                        <div class="dates ">
                                            <span>6</span>
                                        </div>
                                        <div class="dates day">
                                            <span>7</span>
                                        </div>
                                        <div class="dates day">
                                            <span>8</span>
                                        </div>
                                        <div class="dates day">
                                            <span>9</span>
                                        </div>
                                        <div class="dates day">
                                            <span>10</span>
                                        </div>
                                        <div class="dates day asingle">
                                            <span>11</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>12</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>13</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>14</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>15</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>16</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>17</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>18</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>19</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>20</span>
                                        </div>
                                        <div class="dates day  ">
                                            <span>21</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>22</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>23</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>24</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>25</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>26</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>27</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>28</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>29</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>30</span>
                                        </div>
                                        <div class="dates day">
                                            <span>1</span>
                                        </div>
                                        <div class="dates day">
                                            <span>2</span>
                                        </div>
                                        <div class="dates day">
                                            <span>3</span>
                                        </div>
                                        <div class="dates day">
                                            <span>4</span>
                                        </div>
                                        <div class="dates day">
                                            <span>5</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div></div>
                    <div class="col-3"> <div style="margin-bottom: 210px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value="MM/DD/YY">
                            <img src="img/svgs/data.svg" alt="">
                            <div class="unis-date-filter">
                                <div class="date-box">
                                    <div class="date-view">
                                        <div class="operating-box pl-3 pr-3 mb-2">
                                            <i class="icon-15 cursor-p"></i>
                                            July 2018
                                            <i class="icon-8 cursor-p"></i>
                                        </div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates weeks">M</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">W</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">F</div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates ">
                                            <span>1</span>
                                        </div>
                                        <div class="dates ">
                                            <span>2</span>
                                        </div>
                                        <div class="dates ">
                                            <span>3</span>
                                        </div>
                                        <div class="dates ">
                                            <span>4</span>
                                        </div>
                                        <div class="dates ">
                                            <span>5</span>
                                        </div>
                                        <div class="dates ">
                                            <span>6</span>
                                        </div>
                                        <div class="dates day">
                                            <span>7</span>
                                        </div>
                                        <div class="dates day">
                                            <span>8</span>
                                        </div>
                                        <div class="dates day">
                                            <span>9</span>
                                        </div>
                                        <div class="dates day">
                                            <span>10</span>
                                        </div>
                                        <div class="dates day  pitch-on">
                                            <span>11</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>12</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>13</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>14</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>15</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>16</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>17</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>18</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>19</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>20</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>21</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>22</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>23</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>24</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>25</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>26</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>27</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>28</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>29</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>30</span>
                                        </div>
                                        <div class="dates day">
                                            <span>1</span>
                                        </div>
                                        <div class="dates day">
                                            <span>2</span>
                                        </div>
                                        <div class="dates day">
                                            <span>3</span>
                                        </div>
                                        <div class="dates day">
                                            <span>4</span>
                                        </div>
                                        <div class="dates day">
                                            <span>5</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div></div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
                <label>Date</label>
                <button class="unis-multiselect">
                    <input type="button" value="MM/DD/YY">
                    <img src="img/svgs/data.svg" alt="">
                    <div class="unis-date-filter">
                        <div class="date-box">
                            <div class="date-view">
                                <div class="operating-box pl-3 pr-3 mb-2">
                                    <i class="icon-15 cursor-p"></i>
                                    July 2018
                                    <i class="icon-8 cursor-p"></i>
                                </div>
                                <div class="dates weeks">S</div>
                                <div class="dates weeks">M</div>
                                <div class="dates weeks">T</div>
                                <div class="dates weeks">W</div>
                                <div class="dates weeks">T</div>
                                <div class="dates weeks">F</div>
                                <div class="dates weeks">S</div>
                                <div class="dates ">
                                    <span>1</span>
                                </div>
                                <div class="dates ">
                                    <span>2</span>
                                </div>
                                <div class="dates ">
                                    <span>3</span>
                                </div>
                                <div class="dates ">
                                    <span>4</span>
                                </div>
                                <div class="dates ">
                                    <span>5</span>
                                </div>
                                <div class="dates ">
                                    <span>6</span>
                                </div>
                                <div class="dates day">
                                    <span>7</span>
                                </div>
                                <div class="dates day">
                                    <span>8</span>
                                </div>
                                <div class="dates day">
                                    <span>9</span>
                                </div>
                                <div class="dates day">
                                    <span>10</span>
                                </div>
                                <div class="dates day  pitch-on">
                                    <span>11</span>
                                </div>
                                <div class="dates day ">
                                    <span>12</span>
                                </div>
                                <div class="dates day ">
                                    <span>13</span>
                                </div>
                                <div class="dates day ">
                                    <span>14</span>
                                </div>
                                <div class="dates day ">
                                    <span>15</span>
                                </div>
                                <div class="dates day ">
                                    <span>16</span>
                                </div>
                                <div class="dates day ">
                                    <span>17</span>
                                </div>
                                <div class="dates day ">
                                    <span>18</span>
                                </div>
                                <div class="dates day ">
                                    <span>19</span>
                                </div>
                                <div class="dates day ">
                                    <span>20</span>
                                </div>
                                <div class="dates day  asingle">
                                    <span>21</span>
                                </div>
                                <div class="dates day ">
                                    <span>22</span>
                                </div>
                                <div class="dates day ">
                                    <span>23</span>
                                </div>
                                <div class="dates day ">
                                    <span>24</span>
                                </div>
                                <div class="dates day ">
                                    <span>25</span>
                                </div>
                                <div class="dates day ">
                                    <span>26</span>
                                </div>
                                <div class="dates day ">
                                    <span>27</span>
                                </div>
                                <div class="dates day ">
                                    <span>28</span>
                                </div>
                                <div class="dates day ">
                                    <span>29</span>
                                </div>
                                <div class="dates day ">
                                    <span>30</span>
                                </div>
                                <div class="dates day">
                                    <span>1</span>
                                </div>
                                <div class="dates day">
                                    <span>2</span>
                                </div>
                                <div class="dates day">
                                    <span>3</span>
                                </div>
                                <div class="dates day">
                                    <span>4</span>
                                </div>
                                <div class="dates day">
                                    <span>5</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </button>

        </template>
    </dfault-vuew>
<div style="height: 200px"></div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-12 d-flex">
                    <div class="col-3"><div style="margin-bottom: 40px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value="MM/DD/YY">
                            <img src="img/svgs/data.svg" alt="">
                        </button>
                    </div></div>
                    <div class="col-3"> <div style="margin-bottom: 210px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value="MM/DD/YY">
                            <img src="img/svgs/data.svg" alt="">
                            <div class="unis-date-filter right">
                                <div class="date-box">
                                    <div class="date-view">
                                        <div class="operating-box pl-3 pr-3 mb-2">
                                            <i class="icon-15 cursor-p"></i>
                                            July 2018
                                            <i class="icon-8 cursor-p"></i>
                                        </div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates weeks">M</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">W</div>
                                        <div class="dates weeks">T</div>
                                        <div class="dates weeks">F</div>
                                        <div class="dates weeks">S</div>
                                        <div class="dates ">
                                            <span>1</span>
                                        </div>
                                        <div class="dates ">
                                            <span>2</span>
                                        </div>
                                        <div class="dates ">
                                            <span>3</span>
                                        </div>
                                        <div class="dates ">
                                            <span>4</span>
                                        </div>
                                        <div class="dates ">
                                            <span>5</span>
                                        </div>
                                        <div class="dates ">
                                            <span>6</span>
                                        </div>
                                        <div class="dates day">
                                            <span>7</span>
                                        </div>
                                        <div class="dates day">
                                            <span>8</span>
                                        </div>
                                        <div class="dates day">
                                            <span>9</span>
                                        </div>
                                        <div class="dates day">
                                            <span>10</span>
                                        </div>
                                        <div class="dates day pitch-on">
                                            <span>11</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>12</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>13</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>14</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>15</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>16</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>17</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>18</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>19</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>20</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>21</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>22</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>23</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>24</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>25</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>26</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>27</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>28</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>29</span>
                                        </div>
                                        <div class="dates day ">
                                            <span>30</span>
                                        </div>
                                        <div class="dates day">
                                            <span>1</span>
                                        </div>
                                        <div class="dates day">
                                            <span>2</span>
                                        </div>
                                        <div class="dates day">
                                            <span>3</span>
                                        </div>
                                        <div class="dates day">
                                            <span>4</span>
                                        </div>
                                        <div class="dates day">
                                            <span>5</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div></div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label>Date</label>
            <button class="unis-multiselect">
                <input type="button" value="MM/DD/YY">
                <img src="img/svgs/data.svg" alt="">
                <div class="unis-date-filter right">
                    <div class="date-box">
                        <div class="date-view">
                            <div class="operating-box pl-3 pr-3 mb-2">
                                <i class="icon-15 cursor-p"></i>
                                July 2018
                                <i class="icon-8 cursor-p"></i>
                            </div>
                            <div class="dates weeks">S</div>
                            <div class="dates weeks">M</div>
                            <div class="dates weeks">T</div>
                            <div class="dates weeks">W</div>
                            <div class="dates weeks">T</div>
                            <div class="dates weeks">F</div>
                            <div class="dates weeks">S</div>
                            <div class="dates ">
                                <span>1</span>
                            </div>
                            <div class="dates ">
                                <span>2</span>
                            </div>
                            <div class="dates ">
                                <span>3</span>
                            </div>
                            <div class="dates ">
                                <span>4</span>
                            </div>
                            <div class="dates ">
                                <span>5</span>
                            </div>
                            <div class="dates ">
                                <span>6</span>
                            </div>
                            <div class="dates day">
                                <span>7</span>
                            </div>
                            <div class="dates day">
                                <span>8</span>
                            </div>
                            <div class="dates day">
                                <span>9</span>
                            </div>
                            <div class="dates day">
                                <span>10</span>
                            </div>
                            <div class="dates day pitch-on">
                                <span>11</span>
                            </div>
                            <div class="dates day ">
                                <span>12</span>
                            </div>
                            <div class="dates day ">
                                <span>13</span>
                            </div>
                            <div class="dates day ">
                                <span>14</span>
                            </div>
                            <div class="dates day ">
                                <span>15</span>
                            </div>
                            <div class="dates day ">
                                <span>16</span>
                            </div>
                            <div class="dates day ">
                                <span>17</span>
                            </div>
                            <div class="dates day ">
                                <span>18</span>
                            </div>
                            <div class="dates day ">
                                <span>19</span>
                            </div>
                            <div class="dates day ">
                                <span>20</span>
                            </div>
                            <div class="dates day ">
                                <span>21</span>
                            </div>
                            <div class="dates day ">
                                <span>22</span>
                            </div>
                            <div class="dates day ">
                                <span>23</span>
                            </div>
                            <div class="dates day ">
                                <span>24</span>
                            </div>
                            <div class="dates day ">
                                <span>25</span>
                            </div>
                            <div class="dates day ">
                                <span>26</span>
                            </div>
                            <div class="dates day ">
                                <span>27</span>
                            </div>
                            <div class="dates day ">
                                <span>28</span>
                            </div>
                            <div class="dates day ">
                                <span>29</span>
                            </div>
                            <div class="dates day ">
                                <span>30</span>
                            </div>
                            <div class="dates day">
                                <span>1</span>
                            </div>
                            <div class="dates day">
                                <span>2</span>
                            </div>
                            <div class="dates day">
                                <span>3</span>
                            </div>
                            <div class="dates day">
                                <span>4</span>
                            </div>
                            <div class="dates day">
                                <span>5</span>
                            </div>
                        </div>
                    </div>
                </div>
            </button>
        </template>
    </dfault-vuew>
    <div style="height: 100px"></div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-12 d-flex">
                    <div class="col-3"><div style="margin-bottom: 40px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value="00:00 AM" >
                            <img src="img/svgs/clock.svg" alt="">
                        </button>
                    </div>
                    </div>
                    <div class="col-3"> <div style="margin-bottom: 210px; width: 166px;">
                        <label>Date</label>
                        <button class="unis-multiselect">
                            <input type="button" value=" 12:00 PM" >
                            <img src="img/svgs/clock.svg" alt="">
                            <ul class="border-0">
                                <li class="m-0 active">
                                    12:00 PM
                                </li>
                                <li class="m-0">
                                    12:30 PM
                                </li>
                                <li class="m-0">
                                    1:00 PM
                                </li>
                                <li class="m-0">
                                    1:30 PM
                                </li>
                                <li class="m-0">
                                    2:00 PM
                                </li>
                                <li class="m-0">
                                    2:30 PM
                                </li>
                            </ul>
                        </button>
                    </div></div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label>Date</label>
            <button class="unis-multiselect">
                <input type="button" value=" 12:00 PM" >
                <img src="img/svgs/clock.svg" alt="">
                <ul class="border-0">
                    <li class="m-0 active">
                        12:00 PM
                    </li>
                    <li class="m-0">
                        12:30 PM
                    </li>
                    <li class="m-0">
                        1:00 PM
                    </li>
                    <li class="m-0">
                        1:30 PM
                    </li>
                    <li class="m-0">
                        2:00 PM
                    </li>
                    <li class="m-0">
                        2:30 PM
                    </li>
                </ul>
            </button>
        </template>
    </dfault-vuew>
    <div style="height: 200px"></div>
</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>